<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="货主" prop="shipmentCode">
        <el-select v-model="form.shipmentCode" @change="shipmentChange" style='width:75%' placeholder="请选择货主">
          <el-option
            v-for="item in options"
            :key="item.partyCode"
            :label="item.userName"
            :value="item.partyCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="goodsName">
        <el-autocomplete
          :disabled="!form.shipmentCode"
          v-model.trim="form.goodsName"
          style='width:75%'
          :trigger-on-focus='false'
          value-key="name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
          @blur="handleBlur"
        />
      </el-form-item>
      <el-form-item label="商品PN" prop="pn">
        <el-input v-model="form.pn" placeholder="商品PN" :disabled='isDisabled' style='width:75%'></el-input>
      </el-form-item>
    </el-form>
    <el-button @click='sub' style='margin-top:10px;margin-left:80%'>保存</el-button>
  </div>
</template>

<script>
import { isDefine } from '@/utils/validate'
import { search,goodspnAdd } from '@/api/packingMaterial/packingMaterial'
export default {
  props:['options'],
  data() {
    return {
      isDisabled:true,
      goodsName:'',
      form:{
        shipmentCode:'',
        pn:'',
        goodsCode:'',
        goodsName:'',
        goodCode:''
      },
      rules:{
        shipmentCode:[ { required: true, message: '请选择货主' }],
        goodsName:[{ required: true, message: '请输入商品' }],
        pn:[{ required: true, message: '请输入商品PN码' }]
      },
      selectData: {}
    }
  },

  methods: {
    querySearchAsync(queryString, cb) {
      if(isDefine(queryString)) {
        const parms = {
          keywords: queryString,
          shipmentCode: this.form.shipmentCode
        }
        search(parms).then(res=>{
          if(res.data.length === 0){
            this.form.goodsName = ''
            this.$message.error('所选择货主无此商品')
          }
          cb(res.data)
        })
      } else {
        cb([])
      }
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0||
        state.goodCode.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.form.goodCode = item.goodCode
      this.form.goodsName = item.name
      this.form.goodsCode = item.code


      this.selectData = {
        goodsName: item.name,
        goodsCode: item.code
      }
      this.handleBlur()
    },
    handleBlur() {
      if (this.form.goodsCode !== '' && this.form.goodsName === this.selectData.goodsName) {
        this.isDisabled = false
      } else {
        this.form.pn = ''
        this.isDisabled = true
      }
    },
    shipmentChange(val){
      if(val){
        this.form.goodCode = ''
        this.form.goodsCode = ''
        this.form.goodsName = ''
        this.form.pn = ''
        this.goodsName = ''
      }
    },
    sub(){
      this.$refs['form'].validate((valid) => {
        if(valid){
          goodspnAdd(this.form).then(res=>{
            this.$message.success(res.msg)
            this.$emit('concen')
          })
        }
      })
    },
  },
};
</script>
